// 解决图片出错
// 自定义全局指令，解决图片出错问题
// Vue.directive('自定义指令名',{
//   inserted(el, binding){
//     el: 调用该指令的DOM元素
//     binding.value: 使用指令时传入的值
//   }
// })

export default {
  inserted(el, binding) {
    // 当图片出错的时候，把图片的src设置为默认图片的地址
    // 如何判断图片出错
    // 原生JS有一个事件，error事件
    el.addEventListener('error', function() {
      // 图片出错的时候会触发这个事件
      console.log('出错了', binding.value)
      // 把图片改为默认的图片地址
      el.src = binding.value
    })
    // 当el.src存在的时候就选择el.src
    // 不存在的时候执行或运算符的代码binding.value
    el.src = el.src || binding.value
  },
  //   // componentUpdated 这个函数是在组件或者子组件数据更新时触发
  componentUpdated(el, binding) {
    el.addEventListener('error', function() {
      el.src = binding.value
    })
    el.src = el.src || binding.value
  }
}

